<template>
  <div>
    <div class="block">
      <span class="demonstration">请选择时间</span>
      <el-date-picker
          v-model="value2"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions"
          @change="changeShijian"
          value-format="yyyy-MM-dd"
      >
      </el-date-picker>
    </div>
    <br>
    <div style="width: 800px;height: 500px" ref="chart" id="log"></div>
  </div>
</template>

<script>
export default {
  name: "operationRecord",

  data(){
    return{
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: '',
      time:[],
      insert:[],
      update:[],
      delete:[],
      other:[],
      startTime:'' ,
      endTime:''
    }
  },
  methods:{
    //线性图显示
    initCharts (){
      var myChart = this.$echarts.init(document.getElementById("log"));
      
      //绘制图表
      myChart.setOption({
        title: {
          text: '系统操作日志统计',
          subtext: '真实存在'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['更新操作', '删除操作','添加操作','其他操作']
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.time,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '更新操作',
            type: 'line',
            data: this.update,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '添加操作',
            type: 'line',
            data: this.insert,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '删除操作',
            type: 'line',
            data: this.delete,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '其他操作',
            type: 'line',
            data: this.other,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
        ]
      });
    },
    //时间选择器的方法
    changeShijian(){
      var that=this;
      this.startTime=this.value2[0];
      this.endTime=this.value2[1];
      this.$http.get(`/statistics/operationRecord/getAllOperLog/${this.value2[0]}/${this.value2[1]}`).then(function (res){
        //console.log(res.data.data);
        that.time = res.data.data.time;
        that.insert = res.data.data.insert;
        that.update = res.data.data.update;
        that.delete = res.data.data.delete;
        that.other = res.data.data.other;
        that.initCharts();
      })
    },
    moren(){
      if (this.startTime=='' && this.endTime==''){
        var that=this;
        this.$http.get(`/statistics/operationRecord/listAllOperLog`).then(function (res){
          //console.log(res.data.data);
          that.time = res.data.data.time;
          that.insert = res.data.data.insert;
          that.update = res.data.data.update;
          that.delete = res.data.data.delete;
          that.other = res.data.data.other;
          that.initCharts();
        })
      }
    }
  },
  mounted(){
    this.moren();
    this.initCharts();
  }
}
</script>

<style scoped>

</style>